/**
 * @description 设置页 - Yuanr
 */
import React from 'react';
import {
  ScrollView, StyleSheet, View, Text
} from 'react-native';
// import HeaderBackButton from '../components/HeaderBackButton';
import { Toast } from 'antd-mobile-rn';
import OrderCard from '../components/OrderCard';
import OrderNav from '../components/OrderNav';
import BaseView from './BaseView';
import { getOrderList } from '../model/order';

export default class Setting extends BaseView {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0, // 高亮项
      data: [] // 列表数据
    };
    this.clickItem = this.clickItem.bind(this);
  }

  // 生命周期render前
  async componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({ goback: this.goback.bind(this) });
    Toast.loading('加载中...');
    const { dataObject = {} } = await getOrderList({
      terminalType: 'MOBILE',
      pageRowCount: 10,
      currentPageNo: 1,
      status: 'USED'
    });
    this.setState({ data: dataObject.aaData || [] });
    Toast.hide();
  }

  componentDidMount() {
    super.componentDidMount();
    this.props.navigation.setParams({
      title: '订单管理',
    });
  }

  goback() {
    const { navigation } = this.props;
    const backAction = NavigationActions.back();
    navigation.dispatch(backAction);
  }

  clickItem(i) {
    // 设置高亮项
    Toast.fail('加载中...');
    this.setState({ activeIndex: i });
    Toast.hide();
  }

  render() {
    // 导航项列表
    const navList = [
      {
        title: '全部'
      },
      {
        title: '已使用'
      },
      {
        title: '已退款'
      }
    ];
    const { activeIndex, data } = this.state;
    const orderCartHTML = [];
    const len = data.length || Math.random() > 0.5 ? 0 : 6;
    for (let i = 0; i < len; i++) {
      orderCartHTML.push(<OrderCard
        key={i}
        style={[styles.cardItem]}
        phoneCode="1760014"
        userName="刘德华"
        price="100.00"
        couponCount="10"
        orderId="112313"
        imgList={[]}
      />);
    }
    return (
      <View style={[styles.wrap]}>
        <ScrollView>
          <OrderNav navList={navList} activeIndex={activeIndex} clickItem={this.clickItem} />
          <View style={styles.listWrap}>{orderCartHTML.length ? orderCartHTML : <Text style={styles.noMore}>没有更多数据</Text>}</View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  cardItem: {
    marginBottom: 10,
    marginTop: 10,
  },
  wrap: {
    flex: 1,
    backgroundColor: '#fff'
  },
  listWrap: {
    paddingLeft: 10,
    paddingRight: 10,
  },
  noMore: {
    flex: 1,
    marginTop: SCALE(100),
    textAlign: 'center'
  }
});
